<template>
  <div class="setting-wrap">
      <G_header title="店铺基本设置" />
          <div class="headimg">
	            <div class="box">
		             <span class="img">
		               <van-uploader
							:after-read="afterRead" 
							multiple
							v-model="fileList"
							:max-count="1"						  
						/>
					 </span>
				</div>
          </div>
         <div class="form">
			<van-cell-group>
			<van-field
			v-model="storename"
			required
			clearable
			label="店铺名称"				    
			placeholder="请输入店铺名称"
			/>
			<van-field
			v-model="contact"
			required
			clearable
			label="联系人"				   
			placeholder="请输入联系人"
			/>
			<van-field
			v-model="phone"
			required
			clearable
			label="联系电话"				  
			placeholder="请输入联系电话"
			/>
		<!--营业时间开始-->
			<van-field
			v-model="start_time"
			required
			clearable
			label="开始时间"				  
			placeholder="请选择营业开始时间"
			@click="startTimePop = true"
			/>                  
			<van-popup v-model="startTimePop" label="开始营业时间" position="bottom" :overlay="true">
			<van-datetime-picker
				v-model="currentTime_start"
				type="time"
				:min-hour="0"
				:max-hour="23"
				@cancel="startTimePop = false"
				@confirm="startTimePop = false"
				@change="startTimeChange"
			/>
			</van-popup>

			<van-field
			v-model="end_time"
			required
			clearable
			label="结束时间"				  
			placeholder="请选择营业结束时间"
			@click="endTimePop = true"
			/>                 
			<van-popup v-model="endTimePop" label="营业结束时间" position="bottom" :overlay="true">
			<van-datetime-picker
				v-model="currentTime_end"
				type="time"
				:min-hour="0"
				:max-hour="23"
				@cancel="endTimePop = false"
				@confirm="endTimePop = false"
				@change="endTimeChange"
			/>
			</van-popup>
			<!--营业时间结束-->  
		</van-cell-group> 
              
         </div> 
         <!--公告开始-->
		<div class="notice">
			<van-cell-group>
				<van-field
				v-model="notice"
				label="公告"
				type="textarea"
				placeholder="请输入公告"
				rows="1"
				autosize
				required
				/>
			</van-cell-group>
		</div>
		<!--公告结束-->
		<div @click="getsetting" class="save">确认修改</div>
  </div>
</template>

<script>
import { Notify } from 'vant';
import { createHash } from 'crypto';
import { Toast } from 'vant'
export default {
	name: 'Setting',
	data(){
	return {
		storeInfo: null,
		fileList: [],
		storename:'',
		contact:'',
		phone:'',
		start_time: '',
		currentTime_start:'00:00',
		startTimePop: false,
		end_time: '',
		currentTime_end:'00:01',
		endTimePop: false,
		notice:'',
		btndisabled: false
	}
	},
	mounted(){
		this.storeInfo = this.global.state.storeInfo;
		this.initStore();
		let params = {};
		params.url = this.global.state.storeInfo.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg';
		this.fileList.push(params)
	},
	methods:{
		initStore(){
			this.storename = this.storeInfo.title;
			this.contact = this.storeInfo.name;
			this.phone = this.storeInfo.mobile;
			this.notice = this.storeInfo.notice_text;
			this.start_time =  this.getLocalTime(this.storeInfo.start_at);
			this.end_time = this.getLocalTime(this.storeInfo.end_at)
		},
		startTimeChange(e) {
			let startTimeArr = e.getValues();
			this.currentTime_start = `${startTimeArr[0]}:${startTimeArr[1]}`;
			this.start_time=this.currentTime_start;
		},
		endTimeChange(e) {
			let endTimeArr = e.getValues();
			this.currentTime_end = `${endTimeArr[0]}:${endTimeArr[1]}`;
			this.end_time=this.currentTime_end;
		},
		getsetting(){
			let accessToken = this.global.state.accessToken || sessionStorage.getItem("token");
			this.axios.post('/api/store/manager/edit_store',{
				token:accessToken,
				title: this.storename,
				start_at: this.start_time,
				end_at: this.currentTime_end,
				realname: this.contact,
				mobile: this.phone,
				notice_text:this.notice,
			}).then(res=>Notify({type:'success',background: '#07c160',message:res.data.message,onClose:()=>this.$router.go(-1)})).catch(err=>Notify({type:'error',message:err.data.message}))
		},
		getLocalTime(nS) {
			let hours = parseInt((nS % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      		let minutes = parseInt((nS % (1000 * 60 * 60)) / (1000 * 60));
			console.log(`${hours}:${minutes}`)
			return `${hours}:${minutes}`;
		},
		afterRead(file) {
			this.fileList[0].url = file.content;
			let params = new FormData();
			params.append('token',this.global.state.accessToken || sessionStorage.getItem("token"))
			params.append("avatar",file.file);
			this.axios.post('/api/store/manager/avatar',params).then(res => {
			if(res.data.code == 200){
				Notify({ type: 'success',background: '#07c160', message: res.data.message,onClose:()=>{
					this.btndisabled = false;
				    this.axios.get('/api/wechatofficial/mine?token='+this.global.state.accessToken).then(result => {
						console.log(result.data.data.stores)
						this.global.state.storeInfo = result.data.data.stores;
				})
				}})
			}else {
				Notify({ type: 'error', message: res.data.message });
				this.btndisabled = true
			}
			}).catch(error => {
				this.btndisabled = true;
				Notify({ type: 'error', message: error.message });
			});
		},
}
}
</script>
<style scoped>
.setting-wrap{position:relative}
.icon{color:red}
.headimg{width:100%;height:80px;line-height:80px;margin-top:10px}
.form{margin-top:10px}
.box{width:96%;height:80px;margin:auto;}
.img{width:78px;height:78px;display:block;margin:auto;border-radius:50%}
.save{width:100%;height:40px;background:#1989FA;text-align:center;line-height:40px;color:white;position:fixed;bottom:0;font-size:16px}
</style>
